<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/eui.css">
  <style>

    .el-aside {
      color: #333;
    }
    h1{
      float: left;
      font-size: 22px;
      color: white;
      margin: 0;
    }
    .el-header{
      background-color: #0095d7;
      color: #333;
      line-height: 60px; /*实现垂直居中效果*/
    }
  </style>
</head>
<body>
<div id="app">
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-header style="text-align: right; font-size: 12px">
      <h1>CoolShark商城后台管理系统</h1>

      <span>欢迎{{user.nick}}回来!</span>
      <a href="javascript:void(0)" @click="logout()">退出登录</a>
    </el-header>

    <el-container>
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="[openIndex]" @select="menuChange">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-flag"></i>分类管理</template>
            <el-menu-item index="1-1">分类列表</el-menu-item>
            <el-menu-item index="1-2">添加分类</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-picture"></i>轮播图管理</template>
            <el-menu-item index="2-1">轮播图列表</el-menu-item>
            <el-menu-item index="2-2">添加轮播图</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-shopping-cart-2"></i>商品管理</template>
            <el-menu-item index="3-1">商品列表</el-menu-item>
            <el-menu-item index="3-2">添加商品</el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>

      <el-main>
        <el-table v-show="index=='1-1'" :data="categoryArr">
          <!--设置表格的第一列为编号/序号  label相当于表头-->
          <el-table-column type="index" label="编号" width="140">
          </el-table-column>
          <!--prop代表数组中对象的属性名-->
          <el-table-column prop="name" label="分类名称">
          </el-table-column>
          <el-table-column label="操作">
            <!--scope对象中会装着当前遍历的信息-->
            <template slot-scope="scope">
              <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
              scope.row代表当前遍历的分类对象-->
              <el-popconfirm title="您确认删除此分类吗?"
                             @confirm="categoryDelete(scope.$index,scope.row)">
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-show="index=='2-1'" :data="bannerArr">
          <el-table-column type="index" label="编号" width="140">
          </el-table-column>
          <el-table-column label="轮播图" width="240">
            <!--template模板 scope里面装着遍历的对象-->
            <template slot-scope="scope">
              <!--scope.row得到当前遍历的对象-->
              <img :src="scope.row.url" style="width: 150px" alt="">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <!--scope对象中会装着当前遍历的信息-->
            <template slot-scope="scope">
              <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
              scope.row代表当前遍历的分类对象-->
              <el-popconfirm title="您确认删除此轮播图吗?"
                             @confirm="bannerDelete(scope.$index,scope.row)">
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-show="index=='3-1'" :data="productArr">
          <el-table-column type="index" label="编号" width="50"></el-table-column>
          <el-table-column prop="title" label="商品标题" width="160">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100">
          </el-table-column>
          <el-table-column prop="viewCount" label="浏览量" width="70">
          </el-table-column>
          <el-table-column prop="saleCount" label="销量" width="50">
          </el-table-column>
          <el-table-column label="商品图片" width="150">
            <!--template模板 scope里面装着遍历的对象-->
            <template slot-scope="scope">
              <!--scope.row得到当前遍历的对象-->
              <img :src="scope.row.url" style="width: 100px" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="created" label="发布时间" width="200">
          </el-table-column>
          <el-table-column label="操作">
            <!--scope对象中会装着当前遍历的信息-->
            <template slot-scope="scope">
              <!--气泡确认组件 scope.$index代表遍历对象在数组中的下标
              scope.row代表当前遍历的分类对象-->
              <el-popconfirm title="您确认删除此商品吗?"
                             @confirm="productDelete(scope.$index,scope.row)">
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>


        </el-table>
      </el-main>
    </el-container>
  </el-container>
  <!--抽屉组件开始
    direction:代表方向rtl(从右到左right to left) / ltr (左到右)/ ttb (上到下)/ btt(下到上)
    size:弹出内容占屏幕的百分比
    :visible.sync 让抽屉是否显示和一个变量进行绑定 true显示 false不显示
  -->
  <el-drawer
          title="添加分类"
          :visible.sync="drawer"
          direction="ttb"
          size="25%">
    <el-form>
      <el-form-item label="分类名称" label-width="80px">
        <el-input style="width: 500px" v-model="categoryName"></el-input>
        <el-button type="success" @click="addCategory">添加</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
  <!--抽屉组件结束-->
</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data() {

      return {
        productArr:[],
        index:"1-1",
        categoryArr:[],
        drawer:false,
        categoryName:"",
        bannerArr:[],
        openIndex:"1",
        user:{}
      }
    },
    created:function(){
      //发请求得到当前登录的用户对象
      axios.get("/currentUser").then(function (response) {
        v.user = response.data;
      })

      //得到地址栏中的参数 判断地址栏中是否包含index参数   2-1
      if (location.search.indexOf('index')!=-1){
        //从地址栏中的?index=2-1 取出2-1
        this.index = location.search.split("=")[1];
        //取出2-1里面的 2
        this.openIndex = this.index.split("-")[0];
      }

      //发请求获取所有分类数据  this代表当前Vue对象
      //此处的this不能用v代替  created方法执行时 v还没有赋值
      this.loadCategory();
      //created方法中只能用this   axios发请求后只能用v
      //发请求获取所有的轮播图数据
      this.loadBanner();
      //发请求获取所有商品信息
      this.loadProduct();
    },
    methods:{
      loadProduct(){
        axios.get("/product/select/admin").then(function (response) {
          v.productArr = response.data;
        })
      },
      loadBanner(){
        axios.get("/banner/select").then(function (response) {
          v.bannerArr = response.data;
        })
      },
      addCategory(){//添加分类
        //发出添加分类的请求
        axios.get("/category/insert?name="+v.categoryName).then(function () {
          v.drawer=false; //让抽屉收回
          v.loadCategory();//重新加载分类信息
        })
      },
      loadCategory(){
        axios.get("/category/select").then(function (response) {
          v.categoryArr = response.data;
        })
      },
      menuChange(index){

        if (index=="1-2"){
          v.drawer=true;
        }else if(index=="2-2"){
          location.href = "/insertBanner.html"
        }else if(index=="3-2"){
          location.href = "/insertProduct.html"
        }else{
          v.index = index;
        }
      },
      categoryDelete(index,category){
        //发请求删除分类
        axios.get("/category/delete?id="+category.id).then(function (response) {
          //重新加载分类数据 因为此处开了子线程删除分类,当此处代码执行时
          //this 已经不是Vue对象了  只能使用v访问方法
          v.loadCategory();
          v.$message({
            showClose:true,  //是否显示关闭按钮
            message:"删除成功!",
            type:"success"
          })
        })
      },
      bannerDelete(index,banner){
        //发出删除轮播图请求
        axios.get("/banner/delete?id="+banner.id).then(function () {
          v.loadBanner();
          v.$message.success("删除轮播图完成!");
        })
      },
      productDelete(index,product){
        //发出删除轮播图请求
        axios.get("/product/delete?id="+product.id).then(function () {
          v.loadProduct();
          v.$message.success("删除商品完成!");
        })
      },
      logout(){
        axios.get("/logout").then(function () {
          location.href="/";//回到首页
        })
      }
    }
  })
</script>
</html>